<template>
  <div class="content">
    <div class="title">
      <span>家电</span>
      <span class="class-list">
        <ul>
          <li
            v-for="item in list"
            :key="item.id"
            :class="item.id == 1 ? 'active' : ''"
          >
            <a href="#">{{ item.name }}</a>
          </li>
        </ul>
      </span>
    </div>
    <div class="grid-list">
      <div><img src="../assets/小米净水器.png" alt="" /></div>
      <div><SingleCard /></div>
      <div><SingleCard /></div>
      <div><SingleCard /></div>
      <div><SingleCard /></div>
      <div><img src="../assets/小米净水器.png" alt="" /></div>
      <div><SingleCard /></div>
      <div><SingleCard /></div>
      <div><SingleCard /></div>
      <div><MoreScan /></div>
    </div>
  </div>
</template>

<script>
import SingleCard from "./SingleCard.vue";
import MoreScan from "./MoreScan.vue";
export default {
  name: "ShopGoods",
  data() {
    return {
      list: [
        { id: 1, name: "热门" },
        { id: 2, name: "电视影音" },
      ],
    };
  },
  mounted() {},
  methods: {},
  components: { SingleCard, MoreScan },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1200px;
  margin: 0 auto;
  .title {
    height: 34px;
    padding: 24px 0px 12px;
    font-size: 22px;
    color: #333333;
    .class-list {
      float: right;
      ul {
        margin-top: 16px;
        display: flex;

        li {
          margin-right: 24px;
          height: 20px;
          font-size: 16px;
          a {
            color: #333333;
          }
        }
      }
    }
  }
  .active {
    a {
      color: #ff6700 !important;
    }
    border-bottom: 2px solid #ff6700;
  }
  .grid-list {
    display: grid;
    grid: repeat(2, 300px) / repeat(5, 232px);
    gap: 14px 10px;
  }
}
</style>
